<template>
  <div class="perm_box" v-loading="loading">
    <el-table
      :data="permDatas"
      border
      :header-row-style="{ color: '#232324', fontWeight: 'bold' }"
    >
      <el-table-column
        align="center"
        label="ID"
        min-width="50"
        prop="permissionId"
      />
      <el-table-column
        align="center"
        label="权限名"
        min-width="120"
        prop="name"
      />
      <el-table-column
        align="center"
        label="编码"
        min-width="120"
        prop="code"
      />
      <el-table-column
        align="center"
        label="状态"
        min-width="120"
        prop="status"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status" type="success">正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="创建时间"
        min-width="180"
        prop="createTime"
      />
      <el-table-column
        align="center"
        label="更新时间"
        min-width="180"
        prop="updateTime"
      />
      <el-table-column align="center" fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-tooltip
            v-if="scope.row.status"
            effect="dark"
            content="权限关闭"
            placement="right"
          >
            <el-button
              type="danger"
              :icon="CircleClose"
              circle
              @click="closePerm(scope.row.permissionId)"
            />
          </el-tooltip>
          <el-tooltip v-else effect="dark" content="权限开放" placement="right">
            <el-button
              type="success"
              :icon="CircleCheck"
              circle
              @click="openPerm(scope.row.permissionId)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { CircleClose, CircleCheck } from '@element-plus/icons-vue'
import { reqClosePerm, reqGetPermList, reqOpenPerm } from '../../api/perm'
import { PermRes } from '@/api/perm/type'

onMounted(async () => {
  await getPermInfoPage()
})

const permDatas = ref<PermRes[]>()
const loading = ref(false)

// 添加菜单方法，id为 0则为添加根菜单
const getPermInfoPage = async () => {
  loading.value = true
  try {
    const { data } = await reqGetPermList()
    permDatas.value = data
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  } finally {
    loading.value = false
  }
}

const openPerm = async (id: number) => {
  try {
    const { message } = await reqOpenPerm(id)
    await getPermInfoPage()
    ElMessage.success(message)
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  }
}

const closePerm = async (id: number) => {
  try {
    const { message } = await reqClosePerm(id)
    await getPermInfoPage()
    ElMessage.success(message)
  } catch (error) {
    if (error instanceof Error) {
      ElMessage.error(error.message)
    }
  }
}
</script>
<style scoped lang="scss">
.perm_box {
  padding: 24px;
}
</style>
